<script setup lang="ts">
import { defineProps, ref } from "vue";
import { TableColumn } from "@/components/table/type";
const emit = defineEmits(["sizeChange", "currentChange"]);
interface Props {
  data: Array<any>;
  column: TableColumn[];
  page: number;
  pageSize: number;
  total: number;
  height: string;
}
const props = defineProps<Props>();
const handleSizeChange = (e: any) => {
  emit("sizeChange", e);
};
const handleCurrentChange = (e: any) => {
  emit("currentChange", e);
};
</script>
<template>
  <div class="box">
    <el-table :data="props.data" style="width: 100%" :height="props.height">
      <el-table-column type="index" />
      <template v-for="item in props.column">
        <el-table-column :prop="item.prop" :label="item.label" align="center" v-if="!item.prop.includes('_slot:')" />
        <el-table-column :prop="item.prop" :label="item.label" align="center" v-else>
          <template #default="scope">
            <slot :name="item.prop.replace('_slot:', '')" :scope="scope.row"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="table-footer">
      <el-pagination v-if="props.total > 0" :current-page="props.page" :page-size="props.pageSize"
        :page-sizes="[10, 20, 40, 80, 100]" layout="total, sizes, prev, pager, next, jumper" :total="props.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.box {
  width: 100%;

  .table-footer {
    height: 60px;
    display: flex;
    align-self: center;
    justify-content: flex-end;
  }
}
</style>
